<template>
	<view class="ma">
		<view class="ma-container">
			<view class="ma-item">
				<view class="ma-item-label">
					名称
				</view>
				<view class="ma-item-content">
					<u--input fontSize="12px" placeholder="请输入内容" border="none" v-model="params.parts_name"></u--input>
				</view>
			</view>
			<view class="ma-item" @tap="show=true">
				<view class="ma-item-label">
					类型
				</view>
				<view class="ma-item-content">
					<u--input disabled fontSize="12px" placeholder="请选择" border="none"
						v-model="params.category_name"></u--input>
				</view>
			</view>
			<view class="ma-item" v-if="!params.id">
				<view class="ma-item-label">
					入库数量
				</view>
				<view class="ma-item-content">
					<u--input fontSize="12px" placeholder="请输入内容" border="none" v-model="params.number"
						@input="numberInput"></u--input>
				</view>
			</view>
			<view class="ma-item">
				<view class="ma-item-label">
					单价
				</view>
				<view class="ma-item-content">
					<u--input fontSize="12px" placeholder="请输入内容" border="none" v-model="params.parts_price"
						></u--input>
				</view>
			</view>
			<view class="ma-item">
				<view class="ma-item-label">
					备注信息
				</view>
				<view class="ma-item-content">
					<u--input fontSize="12px" placeholder="请输入内容" border="none" v-model="params.remarks"></u--input>
				</view>
			</view>
			<!-- 单独图片组 -->
			<view class="form-item">
				<view class="form-item__label">上传图片</view>
				<view class="form-item__content">
					<nt-upload :images="previewImage" @success="successUpload" :maxCount="9"></nt-upload>
				</view>
			</view>
			<u-button style="margin-top: 40rpx;" :customStyle="{borderRadius:'100rpx',fontSize: '34rpx'}"
				color="#1b5bc5" @tap="submit">入库</u-button>
			<u-picker :closeOnClickOverlay="true" :show="show" keyName="name" ref="uPicker" :columns="columns"
				@change="changeHandler" @cancel="show=false" @confirm="confirm"></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		getPartsCategoryPaginate,
		getPersonPartsDetails,
		postPersonParts
	} from '@/api'
	export default {
		async onLoad(e) {
			this.params.id = e.id
			e.id ? setTimeout(async () => {
				await this.getDetail()
			}) : uni.setNavigationBarTitle({
				title: "添加入库"
			})
			await this.getCategoryList()

		},
		data() {
			return {
				previewImage: [],
				params: {
					"id": "", //配件ID:空时为添加，有时为修改
					"parts_name": "", //配件名称
					"category_id": "", //分类ID
					"category_name": "",
					"parts_price": "",
					"number": 1, //数量
					"remarks": "", //备注
					"images": [] //图片
				},
				show: false,
				columns: [],
				columnData: []
			}
		},
		methods: {
			async numberInput(e) {
				await this.$nextTick()
				this.params.number = e.replace(/^\D*(\d{1,3}).*$/g,"$1")
				this.$forceUpdate()
			},
			async submit() {
				let params = JSON.parse(JSON.stringify(this.params))
				if (params?.images?.length > 0) {
					params.images = params?.images.map(e => e.url)
				}
				if (!params.parts_name) {
					return this.toast('名称不能为空！')
				}
				if (!params.category_id) {
					return this.toast('分类类型不能为空！')
				}
				if (!params.number) {
					return this.toast('入库数量不能为空！')
				}
				const {
					code
				} =
				await postPersonParts(params)
				if (code === 1) {
					this.toast('添加成功')
					setTimeout(() => {
						this.back()
						uni.$emit('getList2')
						this.params.id ? null : uni.$emit('getList')
					}, 1000)
				}
			},
			async getCategoryList() {
				const {
					code,
					data
				} = await getPartsCategoryPaginate()
				if (code === 1) {
					this.$set(this.columns, "0", data.map(o => {
						return {
							id: o.id,
							name: o.name
						}
					}))
					this.$set(this, 'columnData', data.map(o => o.level_list))
					this.$set(this.columns, "1", data.map(o => o.level_list)[0])
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				const {
					value
				} = e
				if (!value[1]) {
					return this.toast('数据为空，请重新选择！')
				}
				this.params.category_name = value[1].name
				this.params.category_id = value[1].id
				this.show = false
			},
			async getDetail(id) {
				const {
					msg,
					code
				} = await getPersonPartsDetails({
					id: this.params.id
				})
				if (code === 1) {
					for (const key in this.params) {
						this.params[key] = msg[key]
					}
					this.previewImage = msg.images_list
					this.params.category_name = msg.parts_type
					this.$forceUpdate()
				}
			},
			successUpload(e) {
				this.params.images = e
				console.log(this.params)
			},
		}
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.ma {
		padding: 40rpx;

		&-item {
			display: flex;
			background-color: #fff !important;
			margin-top: 30rpx;
			border-radius: 10rpx;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 30rpx;

			&-label {
				font-weight: bold;
				font-size: 24rpx;
				width: 22%
			}

			&-content {
				flex: 1;

				.u-input {
					background-color: #fff !important;
					height: 100%;
				}
			}
		}

		.form-item {
			margin-top: 30rpx;
			display: flex;
			border-radius: 10rpx;
			background-color: #fff;

			&__label {
				font-weight: bold;
				font-size: 24rpx;
				width: 22%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;

			}

			&__content {

				flex: 1;
				padding-top: 16rpx
			}
		}

	}
</style>